define(['template', 'jquery'], (template) => {
    class Pagebar {
        constructor() {
            this.loadPagebar()
        }
        loadPagebar() {

            $('#pager').load('/html/modules/pagebar.html', () => {
                $('#pager .pagination').on('click', '.jump_a', function() {
                    $(this).addClass('activepage').parents('li').siblings().children('a').removeClass('activepage')
                })
            })
        }
        render(query) {
            this.templateid = query.templateid
            this.ele = query.ele;
            this.list = query.list;
            this.num_pages = Math.ceil(query.count / query.limit)
            this.limit = query.limit;
            $('span.count_span.pagebar_all b').html(query.count)
            $('span.count_span.pagebar_page b').html(this.num_pages)
            let str = ` <li class="active direction"><a href="javascript:;" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>`
            if ((query.count / query.limit) >= 5) {
                for (let i = 0; i < 5; i++) {
                    str += i == 0 ? `<li><a href="javascript:;" class="jump_a activepage">1</a></li>` : `<li><a href="javascript:;" class="jump_a ">${i+1}</a></li>`
                }
                str += `<li class="active direction"><a href="javascript:;" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>`
            } else {
                for (let i = 0; i < this.num_pages; i++) {
                    str += i == 0 ? `<li><a href="javascript:;" class="jump_a activepage">1</a></li>` : `<li><a href="javascript:;" class="jump_a ">${i+1}</a></li>`
                }
                str += `<li class="active direction"><a href="javascript:;" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>`
            }
            $('.pagination').html(str)

            this.targetPage = $('.activepage').html()
            this.bindEvent();
            this.renderPage();

        }
        bindEvent() {
            $('.pagination').on('click', 'a.jump_a', () => {
                // return $('.activepage').html()
                this.targetPage = $('.activepage').html()
                this.renderPage()
            })
            $('.pagination').on('click', '.direction:eq(1).active a', () => {
                let last = $('.jump_a').length;

                if ($('.jump_a:eq(' + (last - 1) + ')').html() >= this.num_pages) {
                    return
                }
                if (!($('.jump_a:eq(4)').html() == this.num_pages)) {
                    for (let i = 0; i < 5; i++) {
                        $('.jump_a:eq(' + i + ')').html($('.jump_a:eq(' + i + ')').html() * 1 + 1)
                    }
                }
                // return $('.activepage').html()0000000000000
                this.targetPage = $('.activepage').html()
                this.renderPage()
            })
            $('.pagination').on('click', '.direction:eq(0).active a', () => {
                if ($('.jump_a:eq(0)').html() <= 1) {
                    return
                }
                if (!($('.jump_a:eq(0)').html() == 1)) {
                    for (let i = 0; i < 5; i++) {
                        $('.jump_a:eq(' + i + ')').html($('.jump_a:eq(' + i + ')').html() * 1 - 1)
                    }
                }
                // return $('.activepage').html()
                this.targetPage = $('.activepage').html()
                this.renderPage()
            })
            $('.jump_btn').on('click', () => {
                if ($('.page_num').val() > this.num_pages || $('.page_num').val() < 1) {
                    alert('请输入正确的页码！')
                    return
                }
                let index = $('.activepage').index('.jump_a');
                if (($('.page_num').val() - 4) >= 1 && ($('.page_num').val() * 1 + 4) <= this.num_pages) {
                    $('.activepage').html($('.page_num').val())
                    for (let i = index, j = 0; i >= 0; i--, j++) {
                        $('.jump_a:eq(' + i + ')').html($('.page_num').val() * 1 - j)
                    }
                    for (let i = 1, j = 1; i <= (5 - index); i++, j++) {
                        $('.jump_a:eq(' + (index + i) + ')').html($('.page_num').val() * 1 + j)
                    }
                } else if (($('.page_num').val() - 4) < 1) {
                    $('.jump_a:eq(0)').html($('.page_num').val()).addClass('activepage').parents('li').siblings().children('a').removeClass('activepage');
                    for (let i = 1; i <= 4; i++) {
                        $('.jump_a:eq(' + i + ')').html($('.page_num').val() * 1 + i)
                    }
                } else if (($('.page_num').val() * 1 + 4) > this.num_pages) {
                    $('.jump_a:eq(4)').html($('.page_num').val()).addClass('activepage').parents('li').siblings().children('a').removeClass('activepage');
                    for (let i = 3, j = 1; i >= 0; i--, j++) {
                        $('.jump_a:eq(' + i + ')').html($('.page_num').val() * 1 - j)
                    }
                }
                $('.page_num').val('')
                    // return $('.activepage').html()
                this.targetPage = $('.activepage').html()
                this.renderPage()
            })
        }
        renderPage() {
            let targetBox = $(this.ele);
            // targetPage
            let arr = []
            let end = (this.limit * (this.targetPage));
            if (this.targetPage == this.num_pages) {
                end = this.list.length;
            }
            for (let i = (this.limit * (this.targetPage - 1)); i < end; i++) {
                arr.push(this.list[i])
            }

            let str = template(this.templateid, {
                list: arr
            })
            targetBox.html(str)
            return arr

        }
    }
    return new Pagebar()
})